import './style.less'

import React, { useState, useRef } from 'react'
import { Modal, message } from 'antd'
import {
  onGetVerificationListXhr,
  onPostCancelVerificationXhr,
} from '@/api/coupon'
import ATablePage from '@/components/ATablePage'
// import { listMock } from './mock'
const Verification = () => {
  const [modalVisible, setModalVisible] = useState(false)
  const [currentRecord, setCurrentRecord] = useState(null)
  const tablePageRef = useRef(null)
  const showCancelConfirm = (record) => {
    setCurrentRecord(record)
    setModalVisible(true)
  }

  const handleCancelVerification = async () => {
    if (!currentRecord) return

    try {
      await onPostCancelVerificationXhr({ id: currentRecord.id })
      message.success('作废成功')
      setModalVisible(false)
      tablePageRef.current?.tableRefresh()
    } catch (error) {
      message.error(error.message || '作废失败')
    }
  }
  const filterList = [
    {
      label: '日期',
      name: 'date',
      mapKeys: ['verificationStartDate', 'verificationEndDate'],
      type: 'date',
    },
    {
      label: '订单号',
      name: 'thirdOrderNo',
    },
    {
      label: '兑换码',
      name: 'thirdCode',
    },
    {
      label: '用户手机号',
      name: 'phone',
    },
  ]

  const columns = [
    {
      title: '兑换码',
      dataIndex: 'codeInfo',
      width: 120,
      render: (v) => {
        const { channelLabel, thirdOrderNo, code, verificationTime } = v || {}
        return (
          <div className="code-info">
            <div>
              渠道： <span className="feild-text">{channelLabel || '--'}</span>
            </div>
            <div>
              三方订单号：
              <span className="link-text">{thirdOrderNo || '--'}</span>
            </div>
            <div>
              兑换码：<span className="link-text">{code || '--'}</span>
            </div>
            <div>
              核销时间：
              <span className="feild-text">{verificationTime || '--'}</span>
            </div>
          </div>
        )
      },
    },
    {
      title: '兑换产品信息',
      dataIndex: 'productInfo',
      width: 160,
      render: (v) => {
        const { couponDescList = [] } = v || {}
        return (
          <div>
            {couponDescList?.map((text) => {
              return (
                <div key={text} className="link-text">
                  {text}
                </div>
              )
            })}
          </div>
        )
      },
    },
    {
      title: '用户信息',
      dataIndex: 'userInfo',
      width: 120,
      render: (v) => {
        const { name, phone, uid } = v || {}
        return (
          <div className="code-info">
            <div className="label">
              昵称：<span className="feild-text">{name || '--'}</span>
            </div>
            <div className="label">
              用户ID：
              <span className="feild-text">
                {uid !== undefined && uid !== null && uid !== '' ? uid : '--'}
              </span>
            </div>
            <div className="label">
              手机号：<span className="feild-text">{phone || '--'}</span>
            </div>
          </div>
        )
      },
    },

    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      render: (_, record) => {
        return (
          <div>
            <a
              onClick={() => showCancelConfirm(record)}
              className="a-link"
              style={{ color: '#3D86EE' }}
            >
              作废
            </a>
          </div>
        )
      },
    },
  ]

  return (
    <>
      <ATablePage
        ref={tablePageRef}
        filter={{
          filterList,
          column: 3,
        }}
        table={{
          columns,
          bordered: true,
          request: {
            xhr: onGetVerificationListXhr,
          },
        }}
      />
      <Modal
        title="确认作废"
        visible={modalVisible}
        onOk={handleCancelVerification}
        onCancel={() => setModalVisible(false)}
        okText="确认"
        cancelText="取消"
      >
        <p>确定要作废这条核销记录吗？</p>
      </Modal>
    </>
  )
}
export default Verification
